<template>
  <div id="site-theme" :class="{'theme-setting-open': themeSettingOpen}">
     <!-- 收缩按钮 -->
    <div class="site-theme-tools" @click="themeSettingOpen = !themeSettingOpen">
      <el-button type="primary" icon="el-icon-setting"></el-button>
    </div>
    <!-- 主题样式 -->
    <h2>{{ $t('theme.themeColor') }}</h2>
    <div>
      <h3>{{ $t('theme.navBar') }}</h3>
      <el-radio-group v-model="navbarLayoutType">
        <el-radio label="default" >{{ $t('color.white') }}</el-radio>
        <el-radio label="inverse" >{{ $t('color.colorful') }}</el-radio>
      </el-radio-group>
    </div>
    <div>
      <h3>{{ $t('theme.sideBar') }}</h3>
      <el-radio-group v-model="sidebarLayoutSkin">
        <el-radio label="light">{{ $t('color.white') }}</el-radio>
        <el-radio label="dark">{{ $t('color.darkness') }}</el-radio>
      </el-radio-group>
    </div>
    <div>
      <h3>{{ $t('theme.theme') }}</h3>
      <el-radio-group v-model="themeColor">
        <el-radio   v-for="item in skinList" :label="item.color" :key="item.name">
          <span class="t-capitalize"></span> {{ $t('color.' + item.name ) }}
        </el-radio>
      </el-radio-group>

      <div class="reset">
        <el-button @click="reset">{{ $t('handle.reset') }}</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  import { toggleClass, addStyle } from '@/utils/index.js'
  export default {
    data () {
      return {
        // 皮肤, 列表
        /* eslint-disable */
        skinList: [
          { name: 'dgblue'   , color: '002140', remark: '东冠蓝'},
          { name: 'blue'     , color: '3E8EF7', remark: '蓝色' },
          { name: 'brown'    , color: '997B71', remark: '棕色' },
          { name: 'cyan'     , color: '0BB2D4', remark: '青色' },
          { name: 'gray'     , color: '757575', remark: '灰色' },
          { name: 'green'    , color: '11C26D', remark: '绿色' },
          { name: 'indigo'   , color: '667AFA', remark: '靛青色' },
          { name: 'orange'   , color: 'EB6709', remark: '橙色' },
          { name: 'pink'     , color: 'F74584', remark: '粉红色' },
          { name: 'purple'   , color: '9463F7', remark: '紫色' },
          { name: 'red'      , color: 'FF4C52', remark: '红色' },
          { name: 'turquoise', color: '17B3A3', remark: '蓝绿色' },
          { name: 'yellow'   , color: 'FCB900', remark: '黄色' }
        ]
      }
    },
    computed: {
      navbarDom () { return document.getElementById('J_navbar') },
      navbarbodyDom () { return document.getElementById('J_navbar_body') },
      navbarLayoutType: {
        get () { return this.$store.state.common.navbarLayoutType },
        set (val) {
          this.$store.commit('common/updateNavbarLayoutType', val)
          if (this.navbarLayoutType === 'default') {  // 白色背景
            addStyle(this.navbarbodyDom, { background: 'white' })
          } else {  // 鲜艳的
            addStyle(this.navbarbodyDom, { background: '' })
          }
        }
      },
      sidebarLayoutSkin: {
        get () { return this.$store.state.common.sidebarLayoutSkin },
        set (val) { this.$store.commit('common/updateSidebarLayoutSkin', val) }
      },
      themeSettingOpen: {
        get () { return this.$store.state.common.themeSettingOpen },
        set (val) { this.$store.commit('common/updateThemeSettingOpen', val) }
      },
      themeColor: {
        get () { return this.$store.state.common.themeColor },
        set (val) {
          this.$store.commit('common/updateThemeColor', val)
          this.toggleTheme()
        }
      }
    },
    mounted () {
      this.toggleTheme()
      // 触发 set 方法
      this.navbarLayoutType = this.navbarLayoutType
    },
    methods: {
      toggleTheme () {
        toggleClass(document.body, 'custom-' + this.themeColor)
        addStyle(this.navbarDom, { background: '#' + this.themeColor })
      },
      reset () {
        this.$store.commit('common/resteTheme')
        this.toggleTheme()
        // 触发 set 方法
        this.navbarLayoutType = this.navbarLayoutType
      }
    }
  }
</script>

<style lang="scss" scoped>
  h2 {
    text-align: center;
  }
  #site-theme{
    position: fixed;
    right: -230px;
    top: 106px;
    bottom: 0;
    z-index: 2000;
    width: 230px;
    height: 100%;
    padding: 5px 20px;
    background: white;
    transition: right 0.5s;
    box-shadow: 0 0 5px rgb(201, 193, 193);
    .el-radio {
      margin: 5px 1em;
    }
    &.theme-setting-open {
        right: 0;
    }
  }
  .site-theme-tools {
    position: absolute;
    top: 0;
    left: -46px;
    text-align: center;
    font-size: 20px;
    border-right: 0;
    border-radius: 4px 0 0 4px;
    color: #fff;
    cursor: pointer;
    transition: right 0.3s ease 0s;
  }
  .el-button--medium {
    padding: 15px;
    font-size: 14px;
    /* 圆角边框四个属性值，分别表示左上角、右上角、右下角、左下角的圆角大小（顺时针方向） */
    border-radius: 4px 0 0 4px;
  }
  .reset {
    border-top: 1px solid #eee;
    margin-top: 20px;
    padding-top: 20px;
  }
</style>
